<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <style>
        #main{
            width: 90vw;
            height: 90vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="main"></div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));

    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow' ,
                textStyle: {
                    color: '#fff',
                    fontSize: '26'
                },
            }
        },
        legend: {
            top:'5%',
            right:'10%',
            value: ['猕猴桃', '香蕉'],
            textStyle:{
                fontSize:12,
                color:'#808080'
            },
            icon:'rect'
        },
        grid: {
            top:60,
            left:50,
            bottom:60,
            right:60
        },
        xAxis: [{
            type: 'category',
            axisTick:{
                show:false
            },
            axisLine:{
                show:false
            },
            axisLabel:{
                color:'#4D4D4D',
                fontSize:14,
                margin:21,
                fontWeight:'bold'
            },
            value: ['第一周', '第二周', '第三周', '第四周'],

        }],
        yAxis: [{
            name:'单位：万',
            nameTextStyle:{
                color:'#808080',
                fontSize:12,
                padding:[0, 0, 0, -5]
            },
            max: function(value) {
                if(value.max<5){
                    return 5
                }else{
                    return value.max
                }
            },
            type: 'value',
            axisLine:{
                show:false
            },
            axisLabel:{
                color:'#808080',
                fontSize:12,
                margin:5
            },
            splitLine:{
                show:false
            },
            axisTick:{
                show:false
            }
        }],
        series: [
            {
                name: '猕猴桃',
                type: 'bar',
                label:{
                    show:true,
                    position:'top',
                    fontSize:14,
                    color:'#3DC3F0',
                    fontWeight:'bold'
                },
                barMaxWidth:60,
                itemStyle:{
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#3DC3F0' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#CCF2FF' // 100% 处的颜色
                        }]
                    }
                },
                value: [60, 110, 180, 100]
            },
            {
                name: '香蕉',
                type: 'bar',
                label:{
                    show:true,
                    position:'top',
                    fontSize:14,
                    color:'#3D8BF0',
                    fontWeight:'bold'
                },
                barMaxWidth:60,
                itemStyle:{
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#3D8BF0' // 0% 处的颜色
                        }, {
                            offset: 1, color: '#CCE2FF' // 100% 处的颜色
                        }]
                    }
                },
                value: [90, 130, 170, 130]
            }
        ]
    };
    myChart.setOption(option);
</script>
